<template>
  <div style="background-color:#f3f5f7;width: 100%;height: 100%">
    <nav-bar/>
    <div class="header-nav-wrapper">
      <ul>
        <li><a href="javascript:void(0);" @click="toUser('center')">个人中心</a></li>
        <li><a href="javascript:void(0);" @click="toUser('order')">我的订单</a></li>
        <li><a href="javascript:void(0);" @click="toUser('profile')">账户资料</a></li>
      </ul>
    </div>
    <div class="main">
      <keep-alive>
        <router-view/>
      </keep-alive>
    </div>
  </div>
</template>

<script>

import NavBar from "@/components/common/navbar/NavBar";
import Footer from "@/components/common/footer/Footer";
export default {
  name: "User",
  components: {Footer, NavBar},
  data(){
    return{
      userId:0
    }
  },
  methods:{
    //路由跳转
    toUser(to){
      this.$router.push('/user/'+to)
    },
  },
  created() {
    this.userId = this.$store.getters.getUserInfo.id
  }
}
</script>

<style scoped>
.w {
  width: 1200px;
  margin:  0 auto;
}
li {
  list-style: none;/*去除原点*/
}
a {
  text-decoration: none;
}
  .header {
    /*background-color: #B3C0D1;*/
    height: 60px;
    line-height: 60px;
  }
  .header-left {
  }
  .header-right {
    display: flex;
    float: right;
    width: 350px;
    margin-right: 20px;
    justify-content: space-around;
    align-items: center;
  }
  .header-nav-wrapper {
    position: relative;
    background-color: #fff;
  }
  .header-nav-wrapper ul {
    display: flex;
    width: 1200px;
    height: 50px;
    line-height: 50px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    justify-content: space-between;
  }
  .header-nav-wrapper ul li {
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
  }
  .header-nav-wrapper ul li a{
    color: #333333;
  }
  .header-nav-wrapper ul li a:hover{
    border-bottom: #333333;
  }
  .main{
    height: calc(100vh - 110px);
  }
</style>